<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"/>
    <script src="../jquery/jquery-3.4.1.min.js"></script>

</head>
<body>
<div class="container-fluid">
    <div class="col-sm-12">
        <div class="form-horizontal" role="form">
            <div class="form-group">
                <label class="col-sm-2 control-label">封面:</label>
                <div class="col-sm-10">
                    <img src="../images/4.png" height="200" width="200" id="surfaceImg"/>
                </div>
            </div>
            <div class="form-group">
                <label for="surfaceFile" class="col-sm-2 control-label">封面</label>
                <div class="col-sm-10">
                    <input type="file" class="form-control files" id="surfaceFile" name="files" multiple=""
                           placeholder="请选择图片">
                </div>
            </div>

            <div class="form-group">
                <label for="info" class="col-sm-2 control-label">描述</label>
                <div class="col-sm-10">
                    <textarea type="text" class="form-control" id="info" rows="10" cols="50"
                    ></textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default" id="okBtn">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        var f_id;

        $.ajax({
            url: "fourCourse/getId",
            type: "get",
            dataType: "json",
            success: function (result) {
                console.log(JSON.stringify(result));
                f_id = result.object;
                console.log("f_id="+f_id);
            }
        })


        $("#surfaceFile").change(function () {
            imgPreview(this);
        });
        $("#okBtn").click(function () {
            //    批量上传图片，第一位封面图片
            //     $(".files")
            var formData = new FormData();
            // var files = $('.files').prop('files');
            $(".files").each(function () {
                console.log(this.files[0]);
                formData.append('files', this.files[0]);
            })
            console.log(formData);
            // formData.append('files', $('#surfaceFile')[0].files[0]);
            // formData.append('files', $('#img1')[0].files[0]);
            formData.append('f_id',f_id);
            formData.append('info',$("#info").val());

            // console.log(files);
            // data.append('avatar', files[0]);

            $.ajax({
                url: '/fourCourse/upload',
                type: 'POST',
                data: formData,
                /**
                 *必须false才会自动加上正确的Content-Type
                 */
                contentType: false,
                /**
                 * 必须false才会避开jQuery对 formdata 的默认处理
                 * XMLHttpRequest会对 formdata 进行正确的处理
                 */
                processData: false,
                success: function (res) {
                    console.log(res);
                    if(res.errorCode==0){
                        $(location).attr("href","fourCourseinfook");
                    }else{
                        alert("更新失败，请检查");
                    }
                }
            });

        });

    });

    function imgPreview(fileDom) {
        //判断是否支持FileReader
        if (window.FileReader) {
            var reader = new FileReader();
        } else {
            alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
        }

        //获取文件
        var file = fileDom.files[0];
        console.log(file);
        var imageType = /^image\//;
        //是否是图片
        if (!imageType.test(file.type)) {
            alert("请选择图片！");
            return;
        }
        reader.readAsDataURL(file);
        //读取完成
        reader.onload = function (e) {
            //获取图片dom
            var img = $("#surfaceImg");
            //图片路径设置为读取的图片
            img.attr("src", e.target.result);
            // alert(e.target.result);
        };
    }
</script>
</body>
</html>